<template>
  <div class="app-container" id="userContainer">
    <div style="margin-bottom: 30px; width: 100%">
      <el-row :gutter="8">
        <el-col :span="5">
          <el-select v-model="queryForm.logType" placeholder="日志类型">
            <el-option
              v-for="item in logTypeData"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-input
            placeholder="用户名..."
            v-model="queryForm.createUserName"
            clearable
            @keyup.enter="initList(1)"
          ></el-input
        ></el-col>
        <el-col :span="10">
          <el-date-picker
            v-model="searchDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="4">
          <el-input
            placeholder="设备名称..."
            v-model="queryForm.deviceName"
            clearable
            @keyup.enter="initList(1)"
          ></el-input
        ></el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            :icon="Search"
            @click="initList(1)"
            v-hasPerm="['system:operationLog:list']"
            >搜索</el-button
          >
          <el-button @click="resetForm" :icon="Refresh">重置</el-button>
        </el-col>
        <el-col :span="10"></el-col>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      :row-style="{ height: '40px' }"
      :cell-style="{ padding: '0px' }"
    >
      <el-table-column
        label="id"
        prop="id"
        width="80"
        align="center"
      ></el-table-column>
         <el-table-column label="日志类型" prop="logType" align="center">
      </el-table-column>
      <el-table-column label="用户" prop="createUserName" align="center">
      </el-table-column>
      <el-table-column prop="deviceName" label="设备名称" align="center" />
      <el-table-column prop="requestIp" label="请求IP" align="center">
      </el-table-column>
       <el-table-column prop="browserName" label="浏览器" align="center">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" />
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :small="false"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { operationList } from "@/api/log";
import { Search, Refresh } from "@element-plus/icons-vue";
import { GetDateStr, getDateStuff } from "@/utils";

const tableData = ref<Array<Object>>([]);
const searchDate = ref<Array<string>>([]);
const startDate: string = GetDateStr(-7);
const endDate: string = GetDateStr(0);
const logTypeData = ref<Array<string>>(["INFO", "DEBUG", "ERROR"]);
searchDate.value = [startDate, endDate];
const total = ref(0);
const queryForm = ref({
  logType: "",
  createUserName: "",
  deviceName: "",
  pageNum: 1,
  pageSize: 10,
  createStartTime: "",
  createEndTime: "",
});

const initList = async (pageNum?: number) => {
  if (pageNum) queryForm.value.pageNum = pageNum;
  queryForm.value.createStartTime = searchDate.value[0] + getDateStuff().start;
  queryForm.value.createEndTime = searchDate.value[1] + getDateStuff().end;

  let result = await operationList(queryForm.value);
  let res = result.data;
  if (res.code == 200) {
    tableData.value = res.data.list;
    total.value = res.data.total;
  }
};
const resetForm = () => {
  searchDate.value = [startDate, endDate];
  queryForm.value = {
    logType: "",
    createUserName: "",
    deviceName: "",
    pageNum: 1,
    pageSize: 10,
    createStartTime: "",
    createEndTime: "",
  };
  tableData.value=[]
  initList(1);
};

const handleSizeChange = (val: number) => {
  queryForm.value.pageSize = val;
  initList();
};
const handleCurrentChange = (val: number) => {
  queryForm.value.pageNum = val;
  initList();
};

onMounted(() => {
  initList();
});
</script>
<style lang="less">
.el-row {
  margin-bottom: 10px;
}
</style>
<style lang="less" scoped>
.app-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

.el-table__cell {
  word-break: break-word;
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>